<template>
<view class="all" :style="{ 'padding-top': topheight + 'px' }">
    <!-- 顶部选项卡 -->
    <view class="con_box1" :style="{ top: topheight + 'px' }">
        <view class="search-box">
            <view class="input-search">
                <input class="input" type="number" value="" v-model="query.keyword" confirm-type="search" @input="searchFn" placeholder="客资电话" placeholder-style="color:#D6D6D6" />
                <icon class="searchIcon" @click="searchFn" type="search" size="26upx"></icon>
            </view>
            <view class="search" @click="filterFn">
                <image src="@/static/approval/filter.png" mode=""></image>
                <text>筛选{{title}}</text>
            </view>
        </view>
        <view class="nav-bar">
            <view v-for="(item,index) in titles" :key="index" class="nav-item" :class="{current: index === tabCurrentIndex}" :id="'tab'+index" @click="changeTab(index)">
                {{item}}
            </view>
        </view>
    </view>

    <view class="con_box2">
        <checkbox-group @change="checkboxChange" class="uni-list">
            <label class="con_list" v-for="(item, index) in getDataList" :key="index">
                <view class="left">
                    <checkbox :disabled="item.apply_status==1?false:true" :value="item.id+''" :checked="item.checked" />
                </view>
                <view class="right">
                    <view class="name">申请商户：{{ item.company.title }}</view>
                    <view class="name">商户申请人：{{ item.applicant.realname }}</view>
                    <view class="name">客资姓名：{{ item.member.realname }}</view>
                    <view class="name">客资电话：{{ item.member.mobile }}</view>
                    <view class="name">申请时间：{{ item.apply_time }}</view>
                    <view class="name">派发时间：{{ item.apply_confirm_time}}</view>
                </view>
            </label>

        </checkbox-group>
        <van-empty v-if="getDataList.length == 0" description="暂无记录" />

    </view>

    <view class="btn" v-if="query.apply_status=='1' && getDataList.length>0">
        <button class="cancel" type="default" @click="submit('3')">
            审核驳回
        </button>
        <button class="sure" type="default" @click="submit('2')">
            审核通过
        </button>
    </view>
    <uni-drawer ref="showRight" mode="right" :mask-click="true" :width="drawerWidth">
        <view class="order-container">
            <view class="c-row ">
                <view class="c-row-col">
                    <view class="col-title"><text style="color: red;">*</text>派发时间</view>
                    <view class="col-text">
                        <picker mode="date" :start="startDate" :end="endDate" @change="applyStartChange">
                            <view> {{ applyStart== 0 ? '开始时间' : applyStart}}</view>
                        </picker>
                    </view>
                    <view class="col-text">
                        <picker mode="date" :start="startDate" :end="endDate" @change="applyEndChange">
                            <view> {{ applyEnd == 0 ? '结束时间' : applyEnd}}</view>
                        </picker>
                    </view>
                </view>
                <view class="c-row-col">
                    <view class="col-title"><text style="color: red;">*</text>审核时间</view>
                    <view class="col-text">
                        <picker mode="date" :start="startDate" :end="endDate" @change="confirmStartChange">
                            <view> {{ confirmStart == 0 ? '开始时间' : confirmStart}}</view>
                        </picker>
                    </view>
                    <view class="col-text">
                        <picker mode="date" :start="startDate" :end="endDate" @change="confirmEndChange">
                            <view> {{ confirmEnd == 0 ? '结束时间' : confirmEnd}}</view>
                        </picker>
                    </view>
                </view>
            </view>

        </view>
        <view class="btn">
            <button type="default" class="cancel" @click="replacementFn">
                重置
            </button>
            <button type="default" class="sure" @click="saveGet">
                筛选
            </button>
        </view>
    </uni-drawer>
</view>
</template>

<script>
import timeSelector from "@/component/wing-time-selector/wing-time-selector.vue";
import navigation from "@/component/navigation.vue";
import request from '@/utils/request.js';
import sun from '@/utils/sun.js';
import titleFix from "@/utils/titleFix";
const query = {
    apply_status: "1",
    from_user_id: "",
    keyword: "",
    apply_time: [],
    apply_confirm_time: []
};
export default {
    name:"merchants",
    mixins: [titleFix],
    components: {
        navigation,
        timeSelector,
    },
    data() {
        const currentDate = this.getDate({
            format: true
        })
         let drawerWidth = window.innerWidth;
        return {
            drawerWidth:300,
            titles: ["待申请", "待审核", "审核通过", "审核驳回"],
            tabCurrentIndex: 1, //当前选项卡索引
            query: Object.assign({}, query), // 搜索条件
            getDataList: [],
            ids: [],
            topheight: "",
            date: currentDate,
            applyStart: 0,
            applyEnd: 0,
            confirmStart: 0,
            confirmEnd: 0,
            selfChecked: false,
            timeout: null,
            title: ""
        };
    },
    onload() {
        this.topheight = sun.getStatusBarHeight();
    },
    onShow() {
        let _this = this;
        _this.getData();
    },
    computed: {
        startDate() {
            return this.getDate('start');
        },
        endDate() {
            return this.getDate('end');
        }
    },
    methods: {
        // 时间选择
        getDate(type) {
            const date = new Date();
            let year = date.getFullYear();
            let month = date.getMonth() + 1;
            let day = date.getDate();

            if (type === 'start') {
                year = year - 2;
            } else if (type === 'end') {
                year = year + 10;
            }
            month = month > 9 ? month : '0' + month;
            day = day > 9 ? day : '0' + day;
            return `${year}-${month}-${day}`;
        },

        // 派发时间
        applyStartChange(e) {
            let _this = this;
            _this.applyStart = e.target.value;
            if (e.target.value != 0) {
                let arr = [];
                arr.push(_this.applyStart)
                _this.query.apply_time = arr;
            }

        },
        applyEndChange(e) {
            let _this = this;
            this.applyEnd = e.target.value;
            if (e.target.value != 0) {
                _this.query.apply_time.push(_this.applyEnd)
            }

        },
        // 审核时间
        confirmStartChange(e) {
            let _this = this;
            this.confirmStart = e.target.value;
            if (e.target.value != 0) {
                let arr = [];
                arr.push(_this.confirmStart)
                _this.query.apply_confirm_time = arr;
            }
        },
        confirmEndChange(e) {
            let _this = this;
            this.confirmEnd = e.target.value;
            if (e.target.value != 0) {
                let arr = [];
                _this.query.apply_confirm_time.push(_this.confirmEnd)
            }
        },
        filterFn() {
            let _this = this;
            _this.$refs.showRight.open();
            _this.query.apply_time = "";
            _this.query.apply_confirm_time = "";
            _this.confirmStart = 0;
            _this.confirmEnd = 0;
            _this.applyStart = 0;
            _this.applyEnd = 0;
        },
        closeDrawer() {
            this.$refs.showRight.close();
        },
        saveGet() {
            let _this = this;
            _this.$nextTick(() => {
                _this.getData();
                _this.$refs.showRight.close();
            })

        },
        replacementFn() {
            let _this = this;
            _this.query.apply_time = "";
            _this.query.apply_confirm_time = "";
            _this.confirmStart = 0;
            _this.confirmEnd = 0;
            _this.applyStart = 0;
            _this.applyEnd = 0;
        },
        topHeightFn(e) {
            this.topheight = e;
        },
        searchFn(e) {
            let _this = this;
            if (_this.timeout) {
                clearTimeout(_this.timeout)
            }
            _this.timeout = setTimeout(function () {
                _this.getData()
            }, 1000)
        },
        //获取数据
        getData() {
            let _this = this;
            let query = {
                ..._this.query
            };
            request.request({
                url: "/api/merchant.apply/index",
                showLoading: true,
                token: true,
                data: query,
                success(res) {
                    if (res.code == 200) {
                        res.data.list.forEach(item => {
                            item.checked = false;
                        });
                        _this.getDataList = res.data.list;

                    }
                },
                fail(e) {
                    uni.showToast({
                        icon: "none",
                        title: "服务器开小差去啦~",
                    });
                },
            });
        },
        //tab切换
        changeTab(e) {
            let _this = this;
            _this.tabCurrentIndex = e;
            _this.query.apply_status = e;
            _this.$forceUpdate();
            _this.getData()

        },
        checkboxChange(e) {
            let _this = this;
            _this.ids = e.detail.value;
            let arr = [];
            arr = _this.ids;
            let items = _this.getDataList;
            for (var i = 0, lenI = items.length; i < lenI; ++i) {
                let item = items[i];
                if (arr.includes(item.id + '')) {
                    _this.$set(item, 'checked', true)
                } else {
                    _this.$set(item, 'checked', false)
                }
            }

        },
        //获取数据
        submit(apply_status) {
            let _this = this;
            let query = {
                apply_status: apply_status,
                ids: _this.ids
            };
            request.request({
                url: "/api/merchant.apply/check",
                showLoading: true,
                token: true,
                data: query,
                success(res) {
                    if (res.code == 200) {
                        uni.showToast({
                            title: res.msg,
                            duration: 2000
                        });
                        _this.getData();
                        _this.ids = [];
                        _this.$forceUpdate()

                    }
                },
                fail(e) {
                    uni.showToast({
                        icon: "none",
                        title: "服务器开小差去啦~",
                    });
                },
            });
        },
    },
};
</script>

<style lang="less">
/* 顶部tabbar */
@import url('../../order/createOrder/components/common.less');
@import url('../../order/components/common.less');

.order-container {
    margin-top: 20px;

    .c-row-col {
        display: flex;
        margin: 0 20px;
        padding: 20upx 0;
        flex: 0 20%;
        color: rgba(69, 90, 100, 0.6);
        font-weight: normal;
        font-size: 30upx;
        line-height: 16px;
        border-bottom: #ddd solid 1px;

        .col-text {
            flex: 1;
            text-align: end;
        }
    }
}

page {
    background: #f4f4f4;
    padding-top: 0;
}

.btn {
    width: 100%;
    padding: 20upx;
    box-sizing: border-box;
    display: flex;
    position: fixed;
    left: 0;
    bottom: 0;
    background: #ffffff;

    button {
        width: 307upx;
        height: 80upx;
        border-radius: 58upx;
        border: 1px solid rgba(64, 108, 235, 1);
        line-height: 80upx;
        font-size: 32upx;
    }

    .cancel {
        color: rgba(64, 108, 235, 1);
        background: #ffffff;
    }

    .sure {
        background: rgba(64, 108, 235, 1);
        color: rgba(255, 255, 255, 1);
    }
}

.nav-bottom {
    position: fixed;
    left: 0;
    // top: 90upx;
    // z-index: 10;
    height: 100upx;
    line-height: 100upx;
    white-space: nowrap;
    box-shadow: 0 2upx 8upx rgba(0, 0, 0, 0.06);
    background-color: #fff;
    box-sizing: border-box;
    background: #ffffff;
    z-index: 5;
    width: 100%;
    display: flex;
    bottom: 0;

    .nav-lable {
        flex: 1;
        text-align: center;
        font-size: 30upx;
        background: #409eff;
        color: white;
        border-right: #ffdede solid 1px;

        &:after {
            content: "";
            width: 100%;
            height: 0;
            border-right: 4upx solid #fff;
            position: absolute;
            left: 50%;
            bottom: 0;
            transform: translateX(-50%);
            transition: 0.3s;
        }
    }

}

.nav-bar {
    position: fixed;
    left: 0;
    // top: 90upx;
    // z-index: 10;
    height: 90upx;
    white-space: nowrap;
    box-shadow: 0 2upx 8upx rgba(0, 0, 0, 0.06);
    background-color: #fff;
    padding-top: 20upx;
    box-sizing: border-box;
    padding-left: 20upx;
    background: #ffffff;
    z-index: 5;
    width: 100%;
    display: flex;

    .nav-item {
        width: 100%;
        box-sizing: border-box;
        display: inline-block;
        padding: 5upx 20upx;
        text-align: center;
        font-size: 30upx;
        color: #303133;
        position: relative;
        text-align: center;

        &:after {
            content: "";
            width: 0;
            height: 0;
            border-bottom: 4upx solid #007aff;
            position: absolute;
            left: 50%;
            bottom: 0;
            transform: translateX(-50%);
            transition: 0.3s;
        }
    }

    .current {
        color: rgba(64, 108, 235, 1);

        &:after {
            width: 100%;
        }
    }
}

.content {
    width: 100%;
    height: auto;
    // background: #FFFFFF;
    position: relative;
}

.con_box1 {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    background: #ffffff;
    border-bottom: 1upx solid #eeeeee;
    z-index: 9;
    box-sizing: border-box;
    padding-top: 20px;

    .search-box {
        width: 100%;
        display: flex;

        .input-search {
            flex: 1;
            position: relative;
            margin: 0 10px;
            height: 60upx;
            font-size: 32upx;
            border-radius: 10px;
            border: 1px solid #f2eded;
            box-sizing: border-box;
            padding: 5px 0 0 5%;

            .uni-input-input {
                padding-left: 20upx;
                line-height: 60upx;

            }
        }

        .searchIcon {
            position: absolute;
            right: 20upx;
            top: 50%;
            transform: translateY(-50%);
        }

        .search {
            width: 20%;
            height: 100%;
            display: flex;
            align-items: center;
            justify-content: center;
            margin-top: 10upx;

            image {
                width: 46upx;
                height: 46upx;
            }

            text {
                width: auto;
                height: 40upx;
                font-size: 28upx;
                font-family: PingFangSC-Regular, PingFang SC;
                font-weight: 400;
                color: rgba(102, 102, 102, 1);
                line-height: 40upx;
            }
        }
    }

}

.con_box2 {
    width: 100%;
    height: auto;
    padding-top: 180upx;
    height: calc(100vh - 150px);
    overflow: auto;
}

.con_list {
    width: 100%;
    height: auto;
    border-bottom: 2upx solid #eeeeee;
    box-sizing: border-box;
    background: #ffffff;
    display: flex;

    .left {
        width: 100upx;
        height: auto;
        padding-left: 32upx;
        padding-top: 32upx;
        box-sizing: border-box;
        background: #ffffff;
    }

    .right {
        width: 650upx;
        padding: 32upx 32upx 32upx 22upx;
        box-sizing: border-box;
        background: #ffffff;

        .title {
            width: 100%;
            margin-bottom: 7upx;
            position: relative;

            .name {
                width: auto;
                height: 100%;
                font-size: 28upx;
                color: rgba(51, 51, 51, 1);
                line-height: 48upx;
            }

            .time {
                width: auto;
                font-size: 24upx;
                color: rgba(153, 153, 153, 1);
                line-height: 48upx;
                position: absolute;
                right: 0;
            }
        }

        .name {
            width: auto;
            font-size: 26upx;
            font-family: PingFangSC-Regular, PingFang SC;
            font-weight: 400;
            color: rgba(153, 153, 153, 1);
            line-height: 37upx;
        }

        .hint {
            width: auto;
            font-size: 26upx;
            font-family: PingFangSC-Regular, PingFang SC;
            font-weight: 400;
            color: rgba(231, 184, 94, 1);
            line-height: 37upx;
            margin-top: 4upx;
        }
    }
}

// 搜索
.search_box {
    width: 100%;
    height: auto;

    .top {
        width: 100%;
        height: auto;
        padding: 16upx 24upx 16upx 24upx;
        display: flex;
        position: relative;
        border-bottom: 1upx solid #eeeeee;
        box-sizing: border-box;

        image {
            width: 46upx;
            height: 46upx;
        }

        image.search {
            position: absolute;
            left: 5%;
            top: 50%;
            transform: translateY(-50%);
            z-index: 5;
        }

        image.cancel {
            position: absolute;
            right: 20%;
            top: 50%;
            transform: translateY(-50%);
            z-index: 5;
        }

        .input {
            width: 595upx;
            height: 56upx;
            background: rgba(255, 255, 255, 1);
            border-radius: 5upx;
            padding-left: 78upx;
            box-sizing: border-box;
            color: #333333;
        }

        .cancel {
            font-size: 28upx;
            color: rgba(64, 108, 235, 1);
            line-height: 50upx;
            margin-left: 32upx;
        }
    }
}

.search_list {
    width: 100%;
    height: auto;

    .tip {
        width: 100%;
        height: auto;
        padding: 14upx 26upx 14upx 26upx;
        box-sizing: border-box;
        font-size: 26upx;
        color: rgba(153, 153, 153, 1);
    }
}

.search_list .con_list {
    width: 100%;
    height: auto;
    border-bottom: 1upx solid #eeeeee;
    box-sizing: border-box;
    background: #ffffff;
    display: flex;

    .left {
        width: 100upx;
        height: auto;
        padding-left: 32upx;
        padding-top: 32upx;
        box-sizing: border-box;
        background: #ffffff;
    }

    .right {
        width: 650upx;
        padding: 32upx 32upx 32upx 22upx;
        box-sizing: border-box;
        background: #ffffff;

        .title {
            width: 100%;
            margin-bottom: 7upx;
            position: relative;

            .name {
                width: auto;
                height: 100%;
                font-size: 28upx;
                color: rgba(51, 51, 51, 1);
                line-height: 48upx;
            }

            .time {
                width: auto;
                font-size: 24upx;
                color: rgba(153, 153, 153, 1);
                line-height: 48upx;
                position: absolute;
                right: 0;
            }
        }

        .name {
            width: auto;
            font-size: 26upx;
            font-family: PingFangSC-Regular, PingFang SC;
            font-weight: 400;
            color: rgba(153, 153, 153, 1);
            line-height: 37upx;
        }

        .hint {
            width: auto;
            font-size: 26upx;
            font-family: PingFangSC-Regular, PingFang SC;
            font-weight: 400;
            color: rgba(231, 184, 94, 1);
            line-height: 37upx;
            margin-top: 4upx;
        }
    }
}

// 筛选
.filter_box {
    width: 100%;
    background: #ffffff;

    .con_box {
        width: 100%;
        height: auto;
        padding: 31upx 33upx 32upx 32upx;
        box-sizing: border-box;

        .title {
            width: 100%;
            padding-bottom: 16upx;
            padding-left: 7upx;
            box-sizing: border-box;
            font-size: 28upx;
            color: rgba(51, 51, 51, 1);
        }

        .list {
            width: 100%;
            height: auto;
            display: flex;
            flex-wrap: wrap;
            justify-content: left;

            text {
                width: 207upx;
                min-height: 85upx;
                text-align: center;
                background: rgba(246, 246, 246, 1);
                border-radius: 15upx;
                display: flex;
                margin-bottom: 24upx;
                margin-right: 22upx;
                font-size: 26upx;
                align-items: center;
                justify-content: center;
                color: rgba(102, 102, 102, 1);
            }

            .active {
                background: #eef2ff;
                color: #406ceb;
            }
        }
    }

    .btn {
        width: 100%;
        padding: 20upx;
        box-sizing: border-box;
        display: flex;
        position: fixed;
        left: 0;
        bottom: 0;
        background: #ffffff;

        button {
            width: 307upx;
            height: 80upx;
            border-radius: 58upx;
            border: 1px solid rgba(64, 108, 235, 1);
            line-height: 80upx;
            font-size: 32upx;
        }

        .cancel {
            color: rgba(64, 108, 235, 1);
            background: #ffffff;
        }

        .sure {
            background: rgba(64, 108, 235, 1);
            color: rgba(255, 255, 255, 1);
        }
    }
}

// 筛选信息
.filterInfo_box {
    width: 100%;
    height: auto;

    .top {
        width: 100%;
        height: auto;
        padding: 14upx 26upx;
        box-sizing: border-box;
        display: flex;
        position: relative;

        text {
            width: auto;
            font-size: 26upx;
            color: rgba(153, 153, 153, 1);
            line-height: 37upx;
        }

        image {
            width: 33upx;
            height: 33upx;
            position: absolute;
            right: 26upx;
        }
    }
}

.orange {
    font-size: 26upx;
    color: rgba(231, 184, 94, 1);
}

.green {
    color: #3cc2a1;
    font-size: 26upx;
}

.red {
    font-size: 26upx;
    color: #e9796d;
}

.gray {
    font-size: 26upx;
    color: #666666;
}

.loading {
    line-height: 2em;
    text-align: center;
    color: #888;
    margin-top: 30upx;
    font-size: 30upx;
}
</style>
